<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <mt-button type="default">default</mt-button>
    <div class="box">
      <button @click.prevent="onSubmit">123</button>
    </div>
    <p>12</p>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      form: {
        username: null,
        password: null,
        captchaValue: null,
        captchaCode: null
      }
    };
  },
  methods: {
    onSubmit() {
      let payload = {};
      Object.keys(this.form).forEach(key => {
        if (this.form[key]) {
          payload[key] = this.form[key];
        }
      });
      this.$store.dispatch("login", payload).then(data => {
        console.log(data)
        if (data && data.errorCount > 0) {
          if (this.loginTimes >= 3 && data.errorCount === 3) {
            this.loginTimes += 1;
          } else {
            this.loginTimes = data.errorCount;
          }
        } else {
          window.setTimeout(() => {
            this.loginTimes = 0;
            window.localStorage.setItem("LOGINTIMES", 0);
            this.$router.push({
              path: this.routerPath
            });
          }, 1000);
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img {
  width: 2rem;
}
p {
  font-size: 1.6rem;
}
.box {
  width: 100%;
  height: 2rem;
  background: rgb(201, 17, 17);
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
